<template>
  <div class="county-sale-box">
    <div class="select-box">
      <div class="province-box">
        <div class="select1">
          <div class="areas-box">
            <div>省：</div>
            <el-select v-model="gets.province" @change="queryF">
              <el-option
                v-for="item in area.province"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <!-- 市 -->
            <el-select v-model="gets.city" @change="queryF">
              <el-option
                v-for="item in area.city"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <!-- 区 -->
            <el-select v-model="gets.county" @change="queryF">
              <el-option
                v-for="item in area.county"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="time-box">
          <div>订单日期</div>
          <el-date-picker
            v-model="valueTime"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </div>
      </div>
    </div>


    <div class="sumsale-box">
      <div class="sumsale-item">
        <div>合伙人总销量</div>
        <div>3</div>
      </div>
      <div class="sumsale-item">
        <div>大客户总销量</div>
        <div>119</div>
      </div>
    </div>


    <div>
      <div class="sort-box">
        <span>销量排序：</span>
        <el-radio-group v-model="radio" @change="changeOrder">
          <el-radio :label="0">全部</el-radio>
          <el-radio :label="1">降序</el-radio>
          <el-radio :label="2">升序</el-radio>
        </el-radio-group>
      </div>

      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="合伙人" name="first">
          <el-table
          :data="counts"
          style="width: 100%"
          :default-sort = "sort"
          >
          <el-table-column
            prop="province"
            label="省"
            sortable
            width="180">
          </el-table-column>
          <el-table-column
            prop="city"
            label="市"
            sortable
            width="180">
          </el-table-column>
          <el-table-column
            prop="area"
            label="区"
            sortable
            width="180">
          </el-table-column>
          <el-table-column
            prop="sale"
            label="销量"
            sortable
            >
          </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="大客户" name="second">
          <el-table
          :data="partners"
          style="width: 100%"
          :default-sort = "sort"
          >
          <el-table-column
            prop="province"
            label="省"
            sortable
            width="180">
          </el-table-column>
           <el-table-column
            prop="city"
            label="市"
            sortable
            width="180">
          </el-table-column>
          <el-table-column
            prop="area"
            label="区"
            sortable
            width="180">
          </el-table-column>
          <el-table-column
            prop="sale"
            label="销量"
            sortable
            >
          </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import axios from "axios"
export default {
  created() {
    this.getData();
  },

  data() {
    return {
      valueTime: "",
      gets: {
        province: "全部省份",
        city: "全部市",
        county: "全部区"
      },
      area: {
        province: [
          {label:"全部省份",value:"全部省份"},
          {label:"北京市",value:"北京市"},
          {label:"天津市",value:"天津市"},
          {label:"四川省",value:"四川省"},
          {label:"河北省",value:"河北省"},
          {label:"山西省",value:"山西省"},
          {label:"内蒙古自治区",value:"内蒙古自治区"},
          {label:"辽宁省",value:"辽宁省"},
          {label:"吉林省",value:"吉林省"},
          {label:"黑龙江省",value:"黑龙江省"},
          {label:"上海市",value:"上海市"},
          {label:"江苏省",value:"江苏省"},
          {label:"浙江省",value:"浙江省"},
          {label:"安徽省",value:"安徽省"},
          {label:"福建省",value:"福建省"},
          {label:"江西省",value:"江西省"},
          {label:"山东省",value:"山东省"},
          {label:"河南省",value:"河南省"},
          {label:"湖北省",value:"湖北省"},
          {label:"湖南省",value:"湖南省"},
          {label:"广东省",value:"广东省"},
          {label:"广西壮族自治区",value:"广西壮族自治区"},
          {label:"海南省",value:"海南省"},
          {label:"重庆市",value:"重庆市"},
          {label:"贵州省",value:"贵州省"},
          {label:"云南省",value:"云南省"},
          {label:"西藏自治区",value:"西藏自治区"},
          {label:"陕西省",value:"陕西省"},
          {label:"甘肃省",value:"甘肃省"},
          {label:"青海省",value:"青海省"},
          {label:"宁夏回族自治区",value:"宁夏回族自治区"},
          {label:"新疆维吾尔自治区",value:"新疆维吾尔自治区"},
          {label:"台湾省",value:"台湾省"},
          {label:"香港特别行政区",value:"香港特别行政区"},
          {label:"澳门特别行政区",value:"澳门特别行政区"}
        ],
        city: [
          {label:"全部市",value:"全部市"},
        ],
        county: [
          {label:"全部区",value:"全部区"},
        ]
      },
      counts: [],
      partners: [],
      radio: 0,
      activeName: "first",
      tableData:[],
      sort: {prop: 'sale', order: 'descending'},
    }
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    getData() {
      axios.get("http://47.108.201.43:3000/api/getCopartnerData", {
        params: {}
      }).then((res)=>{
        if(res.data.code == "200") {
          this.counts = res.data.counts;
          this.partners = res.data.partners;
        }
      });
    },
    queryF() {
      if(this.gets.province == "全部省份") {
        this.getData();
      } else {
        axios.post("http://47.108.201.43:3000/api/queryProvincialData", {
          datas: {
            province: this.gets.province
          }
        }).then((res)=>{
          // console.log(res);
          if(res.data.code == "200") {
          this.counts = res.data.counts;
          this.partners = res.data.partners;
          }
        })
      }
    },
    changeOrder(){
      // if(this.radio == 1) {
      //   this.sort.order = 'descending';
      // }
      // else if(this.radio == 2) {
      //   this.sort.order = 'ascending';
      // }
    },
  }
}
</script>

<style scoped>
.county-sale-box {
  padding-top: 30px;
}

.select-box {
  margin-left: 30px;
  width: inherit;
  text-align: center;
}
.province-box {
  display: flex;
}
.select1 {
  margin-right: 50px;
  width: 400px;
}
.areas-box {
  display: flex;
  align-items: center;
}
.time-box {
  width: 450px;
  display: flex;
  align-items: center;
}

.sumsale-box {
  display: flex;
  margin: 30px;
}
.sumsale-item {
  padding: 30px;
  margin-right: 50px;
  border-radius: 5px;
}
.sumsale-item:hover {
  box-shadow: 1px 2px 6px 2px #d4cdcd;
  background-color: #f3f3f3;
}

.sort-box {
  display: flex;
  margin: 30px;
}
.el-radio-group {
  display: flex;
  align-items: center;
}

.el-tabs {
  margin-left: 10px;
  margin-right: 10px;
}
</style>